<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 校园失物招领系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #3498db, #2980b9);
            background-size: cover;
            background-position: center;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Nunito', sans-serif;
        }
        
        .register-container {
            width: 100%;
            max-width: 500px;
            padding: 15px;
        }
        
        .register-card {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        
        .register-header {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .register-body {
            padding: 30px;
        }
        
        .form-control {
            border-radius: 5px;
            padding: 10px 15px;
            height: auto;
            margin-bottom: 15px;
        }
        
        .btn-register {
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            padding: 10px;
            font-weight: 600;
            width: 100%;
        }
        
        .btn-register:hover {
            background-color: #2980b9;
        }
        
        .register-footer {
            text-align: center;
            margin-top: 20px;
        }
        
        .register-footer a {
            color: #3498db;
            text-decoration: none;
        }
        
        .register-footer a:hover {
            text-decoration: underline;
        }
        
        .alert {
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <h3 class="m-0">失物招领系统</h3>
                <p class="m-0">用户注册</p>
            </div>
            <div class="register-body">
                <!-- 错误消息 -->
                <div th:if="${errorMessage}" class="alert alert-danger mb-4">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <span th:text="${errorMessage}"></span>
                </div>
                
                <!-- 注册表单 -->
                <form th:action="@{/register}" th:object="${user}" method="post" accept-charset="UTF-8">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名:</label>
                        <input type="text" id="username" th:field="*{username}" class="form-control" placeholder="请输入用户名" required>
                        <small class="text-muted">用户名将用于登录，支持中文、字母、数字或下划线</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">电子邮箱:</label>
                        <input type="email" id="email" th:field="*{email}" class="form-control" placeholder="请输入电子邮箱" required>
                        <small class="text-muted">用于找回密码和接收通知</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="password" class="form-label">密码:</label>
                        <input type="password" id="password" th:field="*{password}" class="form-control" placeholder="请输入密码" required>
                        <small class="text-muted">密码长度至少6位</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认密码:</label>
                        <input type="password" id="confirmPassword" th:field="*{confirmPassword}" class="form-control" placeholder="请再次输入密码" required>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="agree" required>
                        <label class="form-check-label" for="agree">我已阅读并同意<a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">用户协议</a></label>
                    </div>
                    
                    <button type="submit" class="btn btn-primary btn-register">注 册</button>
                </form>
            </div>
            
            <div class="register-footer">
                <p>已有账号？<a th:href="@{/login}">立即登录</a></p>
                <p><a th:href="@{/}">返回首页</a></p>
            </div>
        </div>
    </div>
    
    <!-- 用户协议模态框 -->
    <div class="modal fade" id="termsModal" tabindex="-1" aria-labelledby="termsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="termsModalLabel">用户协议</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>校园失物招领系统用户协议</h6>
                    <p>欢迎使用校园失物招领系统。请仔细阅读以下条款，注册即表示您同意以下内容：</p>
                    <ol>
                        <li>用户应当遵守中华人民共和国相关法律法规。</li>
                        <li>用户应当提供真实、准确的个人信息。</li>
                        <li>用户应当妥善保管账号密码，因保管不善造成的损失由用户自行承担。</li>
                        <li>用户发布的信息应当真实、准确，不得发布虚假信息。</li>
                        <li>用户不得利用本系统从事任何违法活动。</li>
                        <li>本系统有权对违反协议的用户采取限制或终止服务的措施。</li>
                    </ol>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我已阅读并同意</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 表单验证脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const usernameInput = document.getElementById('username');
            
            form.addEventListener('submit', function(event) {
                // 记录表单提交
                console.log('表单提交中...');
                console.log('用户名:', usernameInput.value);
                
                // 验证用户名
                if (usernameInput.value.trim() === '') {
                    event.preventDefault();
                    alert('用户名不能为空');
                    return false;
                }
                
                // 验证用户名格式（中文、字母、数字、下划线）
                const usernamePattern = /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/;
                if (!usernamePattern.test(usernameInput.value)) {
                    event.preventDefault();
                    alert('用户名只能包含中文、字母、数字和下划线');
                    return false;
                }
                
                // 验证用户名长度（考虑中文字符）
                if (usernameInput.value.length < 2 || usernameInput.value.length > 50) {
                    event.preventDefault();
                    alert('用户名长度必须在2-50个字符之间');
                    return false;
                }
                
                console.log('表单验证通过，准备提交');
                return true;
            });
        });
    </script>
</body>
</html> 